<template>
    <el-breadcrumb class="breadcrumb" separator-icon="el-icon-arrow-right" v-if="settings.breadcrumb">
        <transition-group name="breadcrumb" mode="out-in">
            <template v-if="route.meta.breadcrumb">
                <template v-for="item in route.meta.breadcrumb" :key="item.path">
                    <el-breadcrumb-item v-if="!item.meta.hideInBreadcrumb && item.meta.title">
                        <el-icon v-if="item.meta.icon"><component :is="item.meta.icon" /></el-icon>
                        {{ item.meta.title }}
                    </el-breadcrumb-item>
                </template>
            </template>
            <el-breadcrumb-item v-else>
                {{ settings.title }}
            </el-breadcrumb-item>
        </transition-group>
    </el-breadcrumb>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { useSettingsStore } from "@/stores/settings";

const route = useRoute();
const settings = useSettingsStore();
</script>

<style lang="scss" scoped>
.breadcrumb {
    flex: none;
    line-height: 48px;
    height: 48px;
    background: #fff;
    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset;
    padding: 0 20px;
    :deep() {
        .el-breadcrumb__inner {
            display: flex;
            align-items: center;
            &.is-link,
            a {
                color: var(--el-text-color-regular);
                font-weight: normal;
            }
            .el-icon {
                margin-right: 8px;
            }
        }
    }
}
.breadcrumb-enter-active {
    transition: all 0.3s;
}
.breadcrumb-enter-from {
    opacity: 0;
    transform: translateX(20px);
}
.breadcrumb-leave-active {
    display: none;
}
</style>
